<template>
  <div class="contact-box">
    <div class="contact-sidenav">
      <div class="group" v-for="item,i of contact" :key="i">
        <p>{{item.title}}</p>
        <ul class="group-container">
          <li v-for="it,j of item.dataList" :key="j">
            <img :src="it.icon" alt="" />
            <span>{{it.title}}</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="contact-body"></div>
  </div>
</template>

<script>
import group from "./group.vue";

export default {
  name: "contact",
  props: {},
  components: {
    group,
  },
  data() {
    return {
      contact: [
        {
          type: "newFriend",
          title: "新的朋友",
          dataList: [
            {
              icon: require("../body/mock/group/newFriends.png"),
            }
          ]
        },
        {
          type: "group",
          title: "群聊",
          dataList: [
            {
              title:"嗦泡大队",
              icon: require("../body/mock/group/img2.png"),
            },
            {
              
              title:"bugStack虫洞栈",
              icon: require("../body/mock/group/img2.png"),
            }
          ]
        },
        {
          type: "user",
          title: "N",
          dataList: [
            {
              title:"妮妮",
              icon: require("../body/mock/group/mv1.jpg"),
            },
            {
              title:"娜娜",
              icon: require("../body/mock/group/mv2.jpg"),
            }
          ]
        },
      ],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>
<style scoped>
* {
  margin: 0 0;
  padding: 0 0;
}

li {
  list-style: none;
}
.contact-box {
  height: calc(100% - 80px);
}

.contact-box .contact-sidenav {
  float: left;
  width: 250px;
  background: #eeeae8;
  height: 100%;
  overflow-y: auto;
}

.contact-box .contact-body {
  float: left;
  width: calc(100% - 250px);
  box-sizing: border-box;
  height: 100%;
  overflow-y: auto;
  background-color: #f5f5f5;
}
.group > p {
  margin: 15px 0px 3px 12px;
  font-size: 12px;
  color: #999999;
}

.group-container li {
  padding: 10px 12px 10px 20px;
}

.contact-box .contact-sidenav .group-container li > img {
  width: 35px;
  height: 35px;
  border-radius: 5px;
  vertical-align: middle;
}

.group-container li > span {
  margin-left: 20px;
  font-size: small;
}
</style>